<style lang="less">
</style>
<template>
  <div class="map"></div>
</template>

<script>
import AMap from 'AMap'
import util from '@/libs/util.js'
let MarkerMovingControl = null
export default {
  name: 'role-manage',
  data() {
    return {
      pathArr: [], //轨迹经纬度
      TraceData: require('./trackData.json'), //轨迹原始数据
      T: 0, //播放还是暂停 0 是暂停 1是播放
      aL: 0, //运行到第几个点
      isSlide: false, //是否在滑动状态
      playState: false, //是否在播放状态
      playSpeed: 50, //播放速度
      MarkerMovingControl: null
    }
  },
  methods: {
    mapInit() {
      this.map = new AMap.Map('map', {
        resizeEnable: true,
        zoom: 5
      })
      let self = this
      this.map.plugin(['AMap.MapType'], function() {
        //地图类型切换
        var type = new AMap.MapType({
          defaultType: 0 //使用2D地图
        })
        self.map.addControl(type)
      })
      this.map.plugin(['AMap.ToolBar'], function() {
        //加载工具条
        var tool = new AMap.ToolBar()
        self.map.addControl(tool)
      })
    },
    initPath() {
      let Mcar = new AMap.Marker({
        map: map,
        position: pathArr[0],
        icon: './AMap/vehicle.png',
        offset: new AMap.Pixel(-26, -13),
        zIndex: 99999,
        autoRotation: true,
        angle: TraceData[0].Direction - 90
      })
      var icon
      if (TraceData[0].CarState.trim() == '熄火') {
        icon = './AMap/vehicleR.png'
      } else if (TraceData[0].CarState.trim() == '行驶') {
        icon = './AMap/vehicleG.png'
      } else if (TraceData[0].CarState.trim() == '停车') {
        icon = './AMap/vehicleY.png'
      } else if (TraceData[0].CarState.trim() == '离线') {
        icon = './AMap/vehicleO.png'
      }

      Mcar.setIcon(icon) //改变车辆图片

      var polyPath = new AMap.Polyline({
        map: map,
        path: pathArr,
        strokeColor: '#3366ff',
        strokeOpacity: 0.9,
        strokeWeight: 2
        // strokeStyle: "solid",
        //  showDir: true
      })
      this.MarkerMovingControl = new MarkerMovingControl(map, Mcar, pathArr)
      new AMap.Marker({
        //开始点
        map: map,
        position: pathArr[0],
        offset: new AMap.Pixel(-20, -32),
        icon: new AMap.Icon({
          size: new AMap.Size(40, 40),
          image: './AMap/start.png',
          imageOffset: new AMap.Pixel(0, 0)
        })
      })
      new AMap.Marker({
        //结束点
        map: map,
        position: pathArr[pathArr.length - 1],
        offset: new AMap.Pixel(-20, -32),
        icon: new AMap.Icon({
          size: new AMap.Size(40, 40),
          image: './AMap/end.png',
          imageOffset: new AMap.Pixel(0, 0)
        })
      })
    },
    init() {
      let trackPlay = this
      MarkerMovingControl = function(map, marker, path) {
        this._map = map
        this._marker = marker
        this._path = path
        this._currentIndex = 0
        marker.setPosition(path[0])
        marker.setMap(map) //为Marker指定目标显示地图。当参数值取null时，地图上移除当前Marker：setMap(null)
      }
      MarkerMovingControl.prototype.move = function() {
        if (!this._listenToStepend) {
          this._listenToStepend = AMap.event.addListener(
            this,
            'stepend',
            function() {
              this.step()
            },
            this
          )
        }
        this.step()
      }
      MarkerMovingControl.prototype.stop = function() {
        this._marker.stopMove()
      }
      MarkerMovingControl.prototype.restart = function() {
        this._marker.setPosition(this._path[0])
        var icon
        // if (TraceData[0].CarState.trim() == "熄火") {
        //   icon = "./AMap/vehicleR.png";
        // } else if (TraceData[0].CarState.trim() == "行驶") {
        //   icon = "./AMap/vehicleG.png";
        // } else if (TraceData[0].CarState.trim() == "停车") {
        //   icon = "./AMap/vehicleY.png";
        // } else if (TraceData[0].CarState.trim() == "离线") {
        //   icon = "./AMap/vehicleO.png";
        // }

        this._marker.setIcon(icon) //改变车辆图片
        this._currentIndex = 0
        this.stop()
      }
      MarkerMovingControl.prototype.previous = function() {
        //上一个点
        if (aL < 2) {
          this._marker.setPosition(this._path[aL - 1])
          this._currentIndex = aL - 1
          this.move()
        } else {
          this._marker.setPosition(this._path[aL - 2])
          this._currentIndex = aL - 2
          if (T === 1) {
            //播放状态
            this.move()
          } else {
            if (T === 0) {
              //暂停状态
              this.move()
              this.stop()
            }
          }
        }
      }
      MarkerMovingControl.prototype.next = function() {
        //直接跳到下一个点
        var pathlen = this._path.length
        if (aL < pathlen) {
          this._marker.setPosition(this._path[aL])
          this._currentIndex = aL
          if (T === 1) {
            this.move()
          } else {
            if (T === 0) {
              this.move()
              this.stop()
            }
          }
        } else {
          alert('这已经是最后一个点！')
        }
      }
      MarkerMovingControl.prototype.skip = function() {
        this._marker.setPosition(this._path[trackPlayback.X])
        this._currentIndex = trackPlayback.X
        if (T === 1) {
          this.move()
        } else {
          if (T === 0) {
            this.move()
            this.stop()
          }
        }
        aL = trackPlayback.X
      }
      MarkerMovingControl.prototype.step = function() {
        var bc = this._currentIndex + 1 //即将到达的下一个点
        if (bc <= this._path.length) {
          if (!this._listenToMoveend) {
            this._listenToMoveend = AMap.event.addListener(
              this._marker,
              'moveend',
              function() {
                this._currentIndex++ //结束一次 到下一个点

                AMap.event.trigger(this, 'stepend')
                //事件流程 move (添加监听stepend) step(添加监听moveend) 到事件moving 结束后出发到moveend 然后触发到stepend 再次进入step
              },
              this
            )
          }
          aL = bc //赋值aL 在第几个点

          trackPlayback.X++

          if (typeof this._path[bc] !== 'undefined') {
            if (TraceData[aL].CarState != TraceData[aL - 1].CarState) {
              var icon
              if (TraceData[aL].CarState.trim() == '熄火') {
                icon = './AMap/vehicleR.png'
              } else if (TraceData[aL].CarState.trim() == '行驶') {
                icon = './AMap/vehicleG.png'
              } else if (TraceData[aL].CarState.trim() == '停车') {
                icon = './AMap/vehicleY.png'
              } else if (TraceData[aL].CarState.trim() == '离线') {
                icon = './AMap/vehicleO.png'
              }

              this._marker.setIcon(icon) //改变车辆图片
            }

            var Xgap = Math.abs(
              parseFloat(TraceData[aL].LongitudeNew) -
                parseFloat(TraceData[aL - 1].LongitudeNew)
            )
            var Ygap = Math.abs(
              parseFloat(TraceData[aL].LatitudeNew) -
                parseFloat(TraceData[aL - 1].LatitudeNew)
            )
            if (Xgap < 0.000095 && Ygap < 0.000095) {
              //距离太小moveTo 方法不会进入moveend 事件  超过此范围才moveTo
              this._currentIndex++
              if (T === 1 && !isSlide) {
                //播放状态且没有在滑动
                setTimeout(
                  function() {
                    //播放状态才回调
                    this.step()
                  }.bind(this),
                  120000 / trackPlayback.playSpeed
                )
              }
            } else {
              this._marker.moveTo(this._path[bc], trackPlayback.playSpeed)

              AMap.event.addListener(Mcar, 'moving', function() {
                //J 代表车辆
                var pois = Mcar.getPosition()
                if (MapViewPort.contains(pois) !== true) {
                  map.panTo(pois)
                  trackPlayback.getViewPort()
                }
              })
            }
          }
        }
      }
    }
  },
  mounted() {
    this.mapInit()
  }
}
</script>